<template>
	<!-- 身份证 -->
	<view class="bigbox">
		<view class="" >
			<u-empty text="暂无身份证" marginTop="100" v-if="!cardDetail"></u-empty>
			<view class="boxr box-item flex row-between pt30 pb50 pl44 pr20 mt26" v-if="cardDetail">
				<!-- 左边图片的盒子 -->
				<view class="mr28">
					<image :src="$baseUrl+cardDetail.positive_image" class="w100 h100"></image>
				</view>
				<!-- /左边图片的盒子 -->
				<!-- 右边图片的盒子 -->
				<view class="box-item-r flex1 flex row-column row-between">
					<!-- 上面的盒子 -->
					<view class="flex row-between box-item-r-t">
						<text class="name">{{cardDetail.name}}</text>
						<view class="flex">
							<view class="flex mr70 col-center" @tap="$jump(`/pages/my/myWallet/IDcard/addIDcard/addIDcard?detail=${JSON.stringify(cardDetail)}`)" >
								<image src="/static/img/my/5idcard-edit.png" class="w50 h50"></image>
								<text class="ml10">编辑</text>
							</view>
							<view class="flex col-center" @tap="deleteCard(cardDetail.id)">
								<image src="/static/img/my/5idcard-de.png" class="w50 h50"></image>
								<text class="txt2 ml10">删除</text>
							</view>
						</view>
					</view>
					
					<view class="box-item-r-b">
						{{cardDetail.id_card}}
					</view>
					
					
				</view>
				<!-- /右边图片的盒子 -->
			</view>
		</view>
		<view class="mr56 h86 paybtn" @tap="$jump('/pages/my/myWallet/IDcard/addIDcard/addIDcard')" v-if="!cardDetail">
			添加身份证
		</view>
	</view>
</template>

<script>
	export default {
		name:'IDCard',
		data() {
			return {
				cardDetail:''
			};
		},
		onShow() {
			this.card()
		},
		methods:{
			deleteCard(item){
				console.log(item)
				this.$api.delIdCard({id:item}).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							// this.bank()
							uni.navigateBack({
								
							})
						}, 1000)
					}
				})
			},
			card() {
				this.$api.idNumberList().then(res => {
					if (res.code == 1) {
						this.cardDetail = res.data;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #F9F9F9;
}
.paybtn {
		width: 80%;
		position: fixed;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		z-index: 99;
	}
.box-item {
	image {
		border-radius: 50%;
	}
	.box-item-r-t {
		.name {
			font-size: 30rpx;
			font-weight: bold;
			color: #0C162E;
		}
		text {
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #1385FF;
		}
		.txt2 {
			color: #FD1D4D;
		}
	}
	.box-item-r-b {
		font-size: 22rpx;
		font-weight: 500;
		color: #6D788B;
	}
}
</style>
